<template>
  <div class="nav">
    <nav-item
        v-for="(item,index) of navData"
        :key="item.id"
        :myIndex="index"
        :item="item"
        :cur-index="curIndex"
        @update:cur-index="updateCurIndex"
    ></nav-item>
  </div>
</template>

<script>
import NavItem from './navItem.vue';

export default {
  name: 'my-nav',
  components: {
    NavItem
  },
  props: ['navData', 'curIndex'],
  methods: {
    updateCurIndex(index) {
      this.$emit('update:curIndex', index);
    }
  }
}
</script>

<style>
.nav {
  width: 100%;
  height: 50px;
}
</style>
